<script setup>
/**
 *
 * @author 高桥凉介
 * @date 2024-12-24 02:53:04
 */
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<template>
  <div id="centerPage">
    <div>
      <el-card class="search">
        <h3>筛选条件</h3>
        <div>
          <div>关键词</div>
          <el-input></el-input>
        </div>
        <div>
          <div>物品类型</div>
          <el-select
              v-model="value"
              placeholder="Select"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <div>任务状态</div>
          <el-select
              v-model="value"
              placeholder="Select"
              size="large"
              style="width: 240px"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </el-card>
    </div>

    <el-card class="task" >
      <el-card class="taskItem" shadow="hover">
        <img src="../assets/pro.jpg" width="250px" height="150px" style="margin-left: 0.8rem"
            >
        <div style="margin-top: 1rem">
          <span style="font-weight: bold; font-size: 20px; margin-left: 0.8rem">sss</span>
          <el-button style="margin-left: 9.2rem">进行中</el-button>
        </div>
        <div style="margin-top: 1rem; margin-left: 0.8rem">
          <el-button type="info">其他</el-button>
        </div>
        <div style="margin-top: 1rem;margin-left: 0.8rem">
          <span>为残疾人捐赠电器</span>
        </div>
        <div style="margin-top: 1rem;margin-left: 0.8rem">
          <p><el-icon><Location /></el-icon> 杭州市残疾人之家</p>
        </div>
        <div style="margin-top: 1rem;margin-left: 0.8rem">
          <p style="align-items: center"><el-icon><PieChart /></el-icon> 2024-12-29 13:00</p>
        </div>
        <div style="margin-top: 2rem;margin-left: 13rem">
          <el-button type="text">查看详情</el-button>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<style scoped>
#centerPage{
  display: flex;
}
.search{
  margin-top: 5rem;
  max-width: 25rem;
}
.task{
  margin-top: 5rem;
  min-width: 80rem;
  margin-left: 1rem;
}
.taskItem{
  max-width: 20rem;
  min-height: 30rem;
}
</style>
